<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <h2 id="h">
            {{ msg }}
        </h2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            // 元素
            // el: "#app",
            data: {
                msg: "标题"
            },
            // 如果有  template  会读取template里面的内容
            // template: "<div>123</div>",
            // 生命周期  (在最合适的时间段做最合适的事情)
            // 初始化之前 获取不到 data  methods
            beforeCreate() {
                
            },
            // 使用最多  获取到 data  methods
            created() {
                
            },
            
            beforeMount() {
                console.log('dom结构准备挂载了')
            },
            mounted() {
                console.log('dom结构挂载完成')
                debugger
            }
        })

        // vm.$mount(元素)  和 el属性的作用一样
        vm.$mount('#app')

        // 10

        // 18
        // 25
    </script>
</body>
</html>